<!DOCTYPE html>
<html>
<head>
  <title>Vue Select Example</title>
  <!-- 引入 Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- 引入 Ant Design Vue -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@3/dist/antd.css">
  <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@3/dist/antd.js"></script>
</head>
<body>
  <div id="app">
    <a-select
      v-model:value="value"
      show-search
      placeholder="Select a person"
      style="width: 200px"
      :options="options"
      :filter-option="filterOption"
      @focus="handleFocus"
      @blur="handleBlur"
      @change="handleChange"
    ></a-select>
  </div>

  <script>
    const { createApp, ref } = Vue;
    const { Select } = antd;

    createApp({
      components: {
        'a-select': Select
      },
      setup() {
        const options = ref([
          { value: 'jack', label: 'Jack' },
          { value: 'lucy', label: 'Lucy' },
          { value: 'tom', label: 'Tom' },
        ]);

        const handleChange = (value) => {
          console.log(`selected ${value}`);
        };

        const handleBlur = () => {
          console.log('blur');
        };

        const handleFocus = () => {
          console.log('focus');
        };

        const filterOption = (input, option) => {
          return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        };

        const value = ref(undefined);

        return {
          options,
          handleChange,
          handleBlur,
          handleFocus,
          filterOption,
          value
        };
      }
    }).mount('#app');
  </script>
</body>
</html>